import React, { PropTypes } from 'react'
import { Form, Button, Row, Col, Radio} from 'antd'
import CustomDatePicker from './custom-date-picker'

const RadioGroup = Radio.Group;


class header extends React.Component {
  constructor (props) {

    super(props);
    this.state={
      stations:props.stations,
      activeMenu: 'hour',
      stationCode:props.stationCode,
      defaultGroup:'4',
      stationDisplay:'none'
    };
    this.params={};
    this.startAt="";
    this.endAt=""

  }
  dateFormat(count,hour){
    var dd = new Date();
    dd.setDate(dd.getDate()+count);//获取count天后的日期
    var y = dd.getFullYear();
    var m = dd.getMonth()+1;//获取当前月份的日期
    var d = dd.getDate();
    var h= dd.getHours();
    if(hour){
        return y+"-"+m+"-"+d+" "+h+":00:00";
    }else{
        return y+"-"+m+"-"+d+" 00:00:00";
    }
  }

  initDate(t){
   
    if(t==this.state.activeMenu&&
      this.params.startAt!=undefined&&
    this.params.endAt!=undefined){
      return
    }
    if(t=='hour'||t==undefined){
        var dd = new Date();
        dd.setDate(dd.getDate());
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;
        var d = dd.getDate();
        var h= dd.getHours();
        this.startAt=y+"-"+m+"-"+d+" 00:00:00";
        this.endAt=y+"-"+m+"-"+d+" "+h+":00:00"
    }else if(t=='day'){
        //前7天
        const timestamp = Date.parse(new Date())
        const n=timestamp-1000*60*60*24*7
        const t=new Date(n).format("yyyy-MM-dd")
        this.startAt=t+" 00:00:00";
        //昨天
        this.endAt=this.getYesterday().split(" ")[0]+" 23:59:59"
    }else if(t=='month'){
        this.startAt=this.getPrevMonth();
        this.endAt=this.getPrevMonth()
    }else if(t=='quarter'){
        this.startAt=this.getYear()+'-01';
        this.endAt=this.getYear()+'-03'
    }else{
        this.startAt=this.getYear()-1;
        this.endAt=this.getYear()-1
    }
    
    this.params.startAt=this.startAt
    this.params.endAt=this.endAt
    
  }
 getYesterday=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate()-1);
     var y = dd.getFullYear();
     var m = dd.getMonth()+1;
     var d = dd.getDate();
     return y+"-"+m+"-"+d+" 00:00:00"
  };
  getPrevMonth=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();
     var m = dd.getMonth()+1;
     if(m==1){
         y=y-1;
         m=12
     }else{
         m=m-1
     }
     return y+"-"+m
  };
  //前两个月
  getPrevMonth2=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();
     var m = dd.getMonth()+1;
     if(m==1||m==2){
         y=y-1;
         m=m+10
     }else{
         m=m-2
     }
     return y+"-"+m
  };
  getYear=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();

     return y
  };
  getPrevYear=()=>{
     var dd = new Date();
     dd.setDate(dd.getDate());
     var y = dd.getFullYear();

     return y-1
  };
  onGroupChange(e){
    const group=e.target.value;
    
    if(group==0||group==4){
      this.setState({defaultGroup:group,stationDisplay:'none'});
      this.params.stationCode=group;
      this.onSearch()
    }else{
      let array=[]
      this.props.stations.data.map(function(item){
          if(item.type==group){
            array=array.concat(item)
          }
      });
      let stationCode="-1"
      if(array.length>0){
        stationCode=array[0].code
      }
      this.setState({defaultGroup:group,stationDisplay:'block',stations:{data:array},stationCode:stationCode});
      this.params.stationCode=stationCode;
      this.onSearch()
    }
  }
  onStationChange(e){
      const stationCode=e.target.value;
      this.params.stationCode=stationCode;
      this.setState({stationCode:stationCode});
      this.onSearch()
  }

  handleMenuChange = (e) => {
    const key=e.target.value;
    this.initDate(key);
    this.params.type=key;
    
    this.setState({ activeMenu: key});
    this.onSearch()
  };
  onSearch(){
    
    this.props.onSearch(this.params)
  }
  render(){
    const self=this;

    const {activeMenu,stationCode,defaultGroup,stationDisplay}=this.state;
    let stations=this.state.stations

    if(stations.data.length==0){
      stations=this.props.stations
    }
    this.initDate(activeMenu);
    if(stations.data.length==0){
      return(<div></div>)
    }
    const defaultStation=stationCode==undefined?stations.data[0].code:stationCode;
    const customDatePickerProps={
      startAt:self.startAt,
      endAt:self.endAt,
      type:activeMenu,
      onTimeChange(startAt,endAt){
        self.params.startAt=startAt
        self.params.endAt=endAt
      }
    };
    const nodes=this.state.stations.data.map(function(item){

          return (
                <Radio key={item.id} value={item.code}>{item.name}</Radio>
              )
          
    });


    return (

      <Row gutter={24}>
        <Row gutter={24}>
            <Radio.Group value={activeMenu} onChange={this.handleMenuChange}>
              <Radio.Button value="hour">小时数据</Radio.Button>
              <Radio.Button value="day">日数据</Radio.Button>
              <Radio.Button value="month">月数据</Radio.Button>
              <Radio.Button value="quarter">季度数据</Radio.Button>
              <Radio.Button value="halfyear">半年数据</Radio.Button>
              <Radio.Button value="year">年数据</Radio.Button>
            </Radio.Group>
        </Row>
         <CustomDatePicker {...customDatePickerProps}/>

        <Row gutter={24} style={{marginTop:10,marginBottom:20}}>
          <Col lg={16} md={12} sm={8} xs={24} >

            <RadioGroup onChange={(e)=>{this.onGroupChange(e)}} value={defaultGroup}>
              <Radio key="s4" value="4">全市</Radio>
              <Radio key="s0" value="0">内江城区</Radio>
              <Radio key="s1" value="1">国控站</Radio>
              <Radio key="s2" value="2">省控站</Radio>
              <Radio key="s3" value="3">市控站</Radio>
            </RadioGroup>
            <RadioGroup style={{marginTop:10,display:stationDisplay}} onChange={(e)=>{this.onStationChange(e)}} value={defaultStation}>
              {nodes}  
            </RadioGroup>
          </Col>
        </Row>
         <Row gutter={24}>
          <Col lg={16} md={12} sm={8} xs={24} style={{marginBottom: 16}}>
           <Button type="primary" style={{marginBottom:20}} onClick={()=>this.onSearch()}>立即查询</Button>
           </Col>
        </Row>
      </Row>
    )
  }
}



header.propTypes = {
  onSearch: PropTypes.func,
  onAdd: PropTypes.func,
  stations: PropTypes.object.isRequired,
  timepoint: PropTypes.string
};

export default header
